<template>
  <div class="login">
    <div class="login-box">
      <img src="@/assets/img/logo.png" alt="">
      <div class="title">南山里平台管理系统</div>
      <el-form :model="form" :rules="rules" ref="login" class="ms-content">
        <el-form-item prop="account">
          <el-input v-model="form.account" placeholder="账号">
            <el-button slot="prepend" icon="el-icon-user"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="密码" v-model="form.password">
            <el-button slot="prepend" icon="el-icon-lock"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="checkCode">
          <el-input placeholder="验证码" v-model="form.checkCode" @keyup.enter.native="submitForm()">
            <el-button slot="prepend" icon="el-icon-lock"></el-button>
            <div class="img-code" @click="refreshCode" slot="suffix">
              <el-image class="img-code" :src="codeUrl"></el-image>
            </div>
          </el-input>
        </el-form-item>
        <div class="password-setting">
          <el-checkbox v-model="checked">记住密码</el-checkbox>
          <div class="forget-password" @click="$router.push('/ForgetPassword')">忘记密码</div>
        </div>
        <el-form-item class="login-btn">
          <el-button type="primary" @click="submitForm()">登录</el-button>
        </el-form-item>
        <p class="login-tips">登录遇到问题请联系客服：<span>400-239849823</span></p>
      </el-form>
    </div>
  </div>
</template>
<script>
  import apis from '../apis/modules/login'
  import CryptoJS from "crypto-js";

  export default {
    data() {
      return {
        codeUrl: "http://youaibsg.dragonworld.top/manger/checkCode",
        form: {
          account: '',
          password: '',
          checkCode: '',
        },
        checked: true,
        rules: {
          account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
          checkCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        },
      }
    },
    mounted() {
      if (localStorage.getItem("rememberPsw")) {
        this.getParam()

      }

    },
    methods: {
      //刷新验证码
      refreshCode() {
        //生成一个随机数（防止缓存）
        var num = Math.ceil(Math.random() * 1000);
        this.codeUrl = this.codeUrl + "?" + num;
      },
      getParam() {
        var bytes1 = CryptoJS.AES.decrypt(this.$cookies.get("account"), "secretkey123");
        this.form.account = bytes1.toString(CryptoJS.enc.Utf8);
        var bytes2 = CryptoJS.AES.decrypt(this.$cookies.get("password"), "secretkey123");
        this.form.password = bytes2.toString(CryptoJS.enc.Utf8);
      },
       submitForm(from) {
        this.$refs.login.validate( async valid => {
          if (valid) {
            const { code, data, msg } = await apis.loginUser(this.form)
      

            if (code == 200) {
              if (this.checked) {
                this.$cookies.set("account", CryptoJS.AES.encrypt(this.form.account + '', "secretkey123").toString(), -1)
                this.$cookies.set("password", CryptoJS.AES.encrypt(this.form.password + '', "secretkey123").toString(), -1)
              } else {
                this.$cookies.remove("account")
                this.$cookies.remove("password")
              }
              localStorage.setItem("rememberPsw", this.checked);
              this.$message.success('登录成功');

              let userinfo = {
                account: data.data.account,
                headportrait: data.data.headportrait,
                username: data.data.username,

              }
              console.log(userinfo)
              localStorage.setItem('power', JSON.stringify(data.power))
              localStorage.setItem('userinfo', JSON.stringify(userinfo))
              localStorage.setItem('mtoken', data.data.mtoken)

              this.$router.push('/Home/DynamicList')
            } else {
              this.$message.error(msg)
            }

          } else {
            this.$message.error('请输入账号、密码或验证码');
            return false;
          }
        });
      },


    }
  }
</script>
<style lang="scss" scoped>
  .login {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../assets/img/bg.jpg);
  }

  .login-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 574px;
    height: 559px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      width: 71px;
      height: 71px;
      border-radius: 50%;
      margin: 40px 0;
      background-color: #000;
    }

    .title {
      margin-bottom: 40px;
      color: #0000006d;

    }

    .ms-content {
      width: 368px;

      .password-setting {
        display: flex;
        justify-content: space-between;
        color: #333;
        font-size: 13px;

        .forget-password {
          cursor: pointer;
        }
      }

      .login-btn button {
        margin-top: 60px;
        width: 100%;
      }

      .login-tips {
        text-align: center;
        color: #333;
        font-size: 13px;

        span {
          color: #0066CC;
        }
      }
    }
  }

  .img-code {
    height: 40px;
  }
</style>